<script lang="ts" setup name="FrontDeskMenu">
import { CirclePlus } from '@element-plus/icons-vue'
import { ColumnProps, ProTableInstance } from '~/library/components/ProTable/interface'
import { System } from '~/src/api/interface/system'
import { deleteFrontDeskMenuAPI, getFrontDeskMenuAPI } from '~/src/api/system'
import AddDialog, { AddDialogExpose } from '../components/AddDialog'

const column = reactive<ColumnProps<System.FrontDeskMenu>[]>([
  { type: 'selection', width: 80 },
  {
    sortable: true,
    prop: 'name',
    label: '名称',
    search: {
      el: 'input',
    },
  },
  {
    sortable: true,
    prop: 'code',
    label: '编码',
  },
])
const addDialogRef = ref<AddDialogExpose>()
const openDialog = (type: string, data?: System.FrontDeskMenu) => {
  addDialogRef.value?.setParams({ title: type, data: data ? data : { name: '', code: '' } })
}
const proTableRef = ref<ProTableInstance>()
const onRefresh = () => {
  proTableRef.value?.getTableList()
}

const onDelete = async () => {
  await useDeleteData(deleteFrontDeskMenuAPI, proTableRef.value as ProTableInstance)
  // proTableRef.value?.getTableList()
}
</script>

<template>
  <div class="auto-height-container">
    <pro-table
      ref="proTableRef"
      :columns="column"
      highlight-current-row
      :indent="20"
      :isCard="false"
      :pagination="true"
      :request-api="getFrontDeskMenuAPI"
      row-key="id"
      title="盘点单列表"
    >
      <template #tableHeader>
        <el-button v-auth="'add'" :icon="CirclePlus" type="primary" @click="openDialog('新增')">新增前台菜单</el-button>
        <el-button v-auth="'delete'" @click="onDelete">删除</el-button>
      </template>
      <template #code="{ row }">
        <el-button v-auth="'edit'" link type="primary" @click="openDialog('编辑', row)">{{ row.code }}</el-button>
      </template>
    </pro-table>
    <add-dialog ref="addDialogRef" @on-ok="onRefresh" />
  </div>
</template>

<style lang="scss" scoped></style>
